<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站账号限制相关页面</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #4F46E5;
            --danger: #EF4444;
            --warning: #F59E0B;
            --success: #10B981;
            --dark: #1E293B;
            --light: #F8FAFC;
            --gray: #64748B;
            --light-gray: #F1F5F9;
            --border: #E2E8F0;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --radius: 8px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 2rem;
            padding-bottom: 4rem;
        }
        
        .container {
            max-width: 1000px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--dark);
        }
        
        .page-subtitle {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 通用样式 */
        .section-card {
            margin-bottom: 4rem;
            padding: 2rem;
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .section-header {
            margin-bottom: 1.75rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .section-title i {
            color: var(--danger);
        }
        
        .section-description {
            color: var(--gray);
            font-size: 0.95rem;
            margin-top: 0.5rem;
        }
        
        /* 账号封禁提示页 */
        .ban-notification {
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
            padding: 3rem 2rem;
        }
        
        .ban-icon {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(239, 68, 68, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--danger);
            font-size: 3rem;
            margin: 0 auto 2rem;
        }
        
        .ban-title {
            font-size: 1.8rem;
            font-weight: 600;
            color: var(--danger);
            margin-bottom: 1rem;
        }
        
        .ban-period {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            padding: 0.75rem;
            background-color: var(--light-gray);
            border-radius: var(--radius);
            display: inline-block;
        }
        
        .ban-reason {
            text-align: left;
            background-color: var(--light-gray);
            padding: 1.25rem;
            border-radius: var(--radius);
            margin-bottom: 2rem;
            text-align: left;
        }
        
        .reason-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        /* 功能限制提示 */
        .restriction-card {
            border-left: 4px solid var(--warning);
            padding: 1.5rem;
            background-color: rgba(245, 158, 11, 0.05);
            border-radius: 0 var(--radius) var(--radius) 0;
            margin-bottom: 1.5rem;
        }
        
        .restriction-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }
        
        .restriction-title {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--warning);
        }
        
        .restriction-period {
            font-size: 0.9rem;
            color: var(--gray);
            background-color: rgba(0,0,0,0.03);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
        }
        
        .restriction-features {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .restricted-feature {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--gray);
            font-size: 0.95rem;
        }
        
        /* 禁言提示 */
        .mute-notification {
            border-radius: var(--radius);
            border: 1px solid var(--warning);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .mute-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .mute-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: rgba(245, 158, 11, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--warning);
            font-size: 1.25rem;
        }
        
        .mute-text {
            flex-grow: 1;
        }
        
        .mute-title {
            font-weight: 600;
            color: var(--warning);
            margin-bottom: 0.25rem;
        }
        
        /* 处罚记录页面 */
        .penalty-record {
            border-radius: var(--radius);
            border: 1px solid var(--border);
            overflow: hidden;
            margin-bottom: 1rem;
            transition: transform 0.2s ease;
        }
        
        .penalty-record:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .penalty-header {
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--light-gray);
        }
        
        .penalty-type {
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .type-ban {
            color: var(--danger);
        }
        
        .type-mute {
            color: var(--warning);
        }
        
        .type-warning {
            color: var(--primary);
        }
        
        .penalty-date {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .penalty-details {
            padding: 1.25rem 1.5rem;
        }
        
        .penalty-period {
            font-size: 0.95rem;
            margin-bottom: 0.75rem;
            color: var(--gray);
        }
        
        .penalty-reason {
            font-size: 0.95rem;
            line-height: 1.6;
        }
        
        .penalty-status {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-top: 0.75rem;
        }
        
        .status-active {
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger);
        }
        
        .status-expired {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--success);
        }
        
        /* 申诉表单 */
        .appeal-form {
            background-color: var(--light-gray);
            padding: 1.5rem;
            border-radius: var(--radius);
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.75rem;
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            font-size: 0.95rem;
            transition: border-color 0.2s ease;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }
        
        .appeal-guidelines {
            background-color: rgba(79, 70, 229, 0.05);
            padding: 1rem;
            border-radius: var(--radius);
            margin-bottom: 1.5rem;
        }
        
        .guideline-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }
        
        .guideline-list {
            padding-left: 1.5rem;
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .guideline-list li {
            margin-bottom: 0.25rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.85rem;
            }
            
            .section-title {
                font-size: 1.35rem;
            }
            
            .ban-notification {
                padding: 2rem 1rem;
            }
            
            .ban-icon {
                width: 80px;
                height: 80px;
                font-size: 2.5rem;
            }
            
            .section-card {
                padding: 1.5rem 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">社交网站账号限制相关页面</h1>
            <p class="page-subtitle">展示各种"小黑屋"场景下的账号限制、处罚提示和管理界面</p>
        </div>
        
        <!-- 1. 账号封禁提示页 - 永久封禁 -->
        <div class="section-card">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-ban"></i> 账号永久封禁提示</h2>
                <p class="section-description">当用户账号因严重违规被永久封禁时显示的提示页面</p>
            </div>
            
            <div class="ban-notification">
                <div class="ban-icon">
                    <i class="fas fa-user-slash"></i>
                </div>
                <h3 class="ban-title">您的账号已被永久封禁</h3>
                <div class="ban-period">
                    封禁时间：永久
                </div>
                
                <div class="ban-reason">
                    <div class="reason-title">
                        <i class="fas fa-exclamation-circle"></i> 封禁原因
                    </div>
                    <p>您的账号因多次发布违反社区规定的内容，包括但不限于：</p>
                    <ul class="mt-2 mb-2 ms-4">
                        <li>发布涉及暴力、色情的违规内容</li>
                        <li>多次对其他用户进行人身攻击和骚扰</li>
                        <li>恶意散布虚假信息，引发不良社会影响</li>
                    </ul>
                    <p>根据《社区管理规定》第5章第12条，您的账号已被永久封禁，所有内容已下架处理。</p>
                </div>
                
                <div>
                    <button class="btn btn-outline-primary me-2">查看社区规定</button>
                    <button class="btn btn-primary">提交申诉</button>
                </div>
            </div>
        </div>
        
        <!-- 2. 账号临时封禁提示 -->
        <div class="section-card">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-clock"></i> 账号临时封禁提示</h2>
                <p class="section-description">当用户账号因违规被临时封禁时显示的提示页面</p>
            </div>
            
            <div class="ban-notification">
                <div class="ban-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <h3 class="ban-title">您的账号已被临时封禁</h3>
                <div class="ban-period">
                    封禁时间：7天（剩余 5天12小时）
                </div>
                
                <div class="ban-reason">
                    <div class="reason-title">
                        <i class="fas fa-exclamation-circle"></i> 封禁原因
                    </div>
                    <p>您在发布的内容中包含违反社区规定的敏感信息，根据《社区管理规定》第3章第7条，您的账号将被临时封禁7天。</p>
                    <p class="mt-2">封禁期间，您将无法使用平台的所有功能，包括浏览、发布内容、评论互动等。</p>
                </div>
                
                <div>
                    <button class="btn btn-outline-primary me-2">查看违规内容</button>
                    <button class="btn btn-primary">提交申诉</button>
                </div>
            </div>
        </div>
        
        <!-- 3. 功能限制提示 -->
        <div class="section-card">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-sliders-h"></i> 账号功能限制</h2>
                <p class="section-description">对账号部分功能进行限制时的提示界面</p>
            </div>
            
            <div class="restriction-card">
                <div class="restriction-header">
                    <div class="restriction-title">
                        <i class="fas fa-comment-slash"></i> 发布功能限制
                    </div>
                    <div class="restriction-period">剩余 23小时45分钟</div>
                </div>
                <p>您的账号因发布的内容被多名用户举报，已被限制部分发布功能。此限制是为了维护社区秩序，减少违规内容的传播。</p>
                
                <div class="restriction-features">
                    <div class="restricted-feature">
                        <i class="fas fa-times-circle text-danger"></i> 发布帖子
                    </div>
                    <div class="restricted-feature">
                        <i class="fas fa-times-circle text-danger"></i> 评论回复
                    </div>
                    <div class="restricted-feature">
                        <i class="fas fa-check-circle text-success"></i> 浏览内容
                    </div>
                    <div class="restricted-feature">
                        <i class="fas fa-check-circle text-success"></i> 私信聊天
                    </div>
                </div>
            </div>
            
            <div class="appeal-form">
                <h3 class="mb-3">申诉功能限制</h3>
                <p class="mb-4 text-muted">如果您认为此限制有误，可以提交申诉说明情况，我们将在24小时内审核处理。</p>
                
                <div class="appeal-guidelines">
                    <div class="guideline-title">申诉注意事项</div>
                    <ul class="guideline-list">
                        <li>请详细说明您的情况，提供相关证据</li>
                        <li>申诉内容需真实有效，虚假申诉将延长限制时间</li>
                        <li>重复提交相同申诉不会加快处理速度</li>
                    </ul>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="appealReason">申诉理由</label>
                    <textarea class="form-control" id="appealReason" placeholder="请详细描述您的申诉理由..."></textarea>
                </div>
                
                <div class="form-group">
                    <label class="form-label" for="appealEvidence">相关证据（可选）</label>
                    <input type="text" class="form-control" id="appealEvidence" placeholder="请提供相关截图或链接地址">
                </div>
                
                <button class="btn btn-primary">提交申诉</button>
            </div>
        </div>
        
        <!-- 4. 禁言提示 -->
        <div class="section-card">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-microphone-slash"></i> 评论禁言提示</h2>
                <p class="section-description">在用户尝试评论时显示的禁言提示</p>
            </div>
            
            <div class="mute-notification">
                <div class="mute-header">
                    <div class="mute-icon">
                        <i class="fas fa-comment-slash"></i>
                    </div>
                    <div class="mute-text">
                        <div class="mute-title">您已被禁言，无法发表评论</div>
                        <div class="mute-details">由于您在评论区发布不当言论，根据社区规定，您的评论功能已被限制3天，剩余时间：1天8小时</div>
                    </div>
                </div>
                <p>禁言期间，您可以正常浏览内容，但无法发表评论和回复。请遵守社区规定，共同维护良好的交流环境。</p>
            </div>
            
            <!-- 模拟评论框（已禁用） -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">发表评论</h5>
                    <textarea class="form-control" placeholder="写下您的评论..." disabled></textarea>
                    <div class="d-flex justify-content-end mt-3">
                        <button class="btn btn-primary" disabled>发布评论</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 5. 处罚记录页面 -->
        <div class="section-card">
            <div class="section-header">
                <h2 class="section-title"><i class="fas fa-history"></i> 账号处罚记录</h2>
                <p class="section-description">展示用户账号历史处罚记录的页面</p>
            </div>
            
            <div class="penalty-record">
                <div class="penalty-header">
                    <div class="penalty-type type-ban">
                        <i class="fas fa-ban"></i> 账号临时封禁
                    </div>
                    <div class="penalty-date">2023-05-15</div>
                </div>
                <div class="penalty-details">
                    <div class="penalty-period">封禁时长：3天（2023-05-15 至 2023-05-18）</div>
                    <div class="penalty-reason">
                        发布包含未经证实的虚假信息，引发用户误解和不良讨论。根据《社区管理规定》第2章第5条，对账号进行临时封禁处理。
                    </div>
                    <span class="penalty-status status-expired">已过期</span>
                </div>
            </div>
            
            <div class="penalty-record">
                <div class="penalty-header">
                    <div class="penalty-type type-mute">
                        <i class="fas fa-comment-slash"></i> 评论禁言
                    </div>
                    <div class="penalty-date">2023-03-22</div>
                </div>
                <div class="penalty-details">
                    <div class="penalty-period">禁言时长：7天（2023-03-22 至 2023-03-29）</div>
                    <div class="penalty-reason">
                        在多个帖子评论区发表不友善言论，对其他用户进行人身攻击。根据《社区管理规定》第4章第9条，对评论功能进行限制。
                    </div>
                    <span class="penalty-status status-expired">已过期</span>
                </div>
            </div>
            
            <div class="penalty-record">
                <div class="penalty-header">
                    <div class="penalty-type type-warning">
                        <i class="fas fa-exclamation-triangle"></i> 警告处分
                    </div>
                    <div class="penalty-date">2023-01-05</div>
                </div>
                <div class="penalty-details">
                    <div class="penalty-period">警告有效期：30天</div>
                    <div class="penalty-reason">
                        发布的内容包含敏感话题，虽未违反社区规定，但可能引发争议。提醒您注意发布内容的合规性，多次警告可能导致进一步处罚。
                    </div>
                    <span class="penalty-status status-expired">已过期</span>
                </div>
            </div>
            
            <div class="mt-4">
                <button class="btn btn-outline-primary">查看完整社区规定</button>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 模拟申诉提交
            const appealButtons = document.querySelectorAll('.btn-primary');
            appealButtons.forEach(button => {
                if (button.textContent === '提交申诉') {
                    button.addEventListener('click', function() {
                        // 简单验证申诉表单
                        if (this.closest('.appeal-form')) {
                            const reason = document.getElementById('appealReason').value;
                            if (!reason.trim()) {
                                alert('请填写申诉理由');
                                return;
                            }
                        }
                        
                        // 显示提交成功提示
                        alert('申诉已提交，我们将在24小时内进行审核，请耐心等待结果。');
                    });
                }
            });
            
            // 查看违规内容按钮
            const viewViolationBtn = document.querySelector('button.btn-outline-primary');
            if (viewViolationBtn && viewViolationBtn.textContent === '查看违规内容') {
                viewViolationBtn.addEventListener('click', function() {
                    alert('违规内容："[内容已隐藏]"\n\n该内容包含违反社区规定的敏感信息，已被系统自动屏蔽。');
                });
            }
            
            // 查看社区规定按钮
            const viewRulesBtns = document.querySelectorAll('button.btn-outline-primary');
            viewRulesBtns.forEach(btn => {
                if (btn.textContent === '查看社区规定' || btn.textContent === '查看完整社区规定') {
                    btn.addEventListener('click', function() {
                        alert('社区规定摘要：\n1. 禁止发布违法违规内容\n2. 禁止人身攻击和骚扰其他用户\n3. 禁止发布虚假信息\n4. 禁止发布色情、暴力内容\n5. 禁止刷屏和垃圾信息\n\n完整规定请查看社区帮助中心。');
                    });
                }
            });
        });
    </script>
</body>
</html>
    
